<template>
  <div class="circleOut">
      <div class="circleIn" :style="'background:linear-gradient(180deg,#0c414e, #0c414e '+styles+'%, #29c9c9 '+(styles2)+'%)'">
      </div>
          <div class="textCenter">
      {{title}}
    </div>
        <div class="subTextCenter">
     入组率
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref,defineProps, computed} from 'vue'
let props =defineProps({
    value: {
      type: Number,
      default: () => {},
  },
  title: {
      type: String,
      default: () => {},
  },
})

let styles =computed(()=>{
  return 100- props.value*100
})
let styles2 =computed(()=>{
let aa = 100- props.value*100
let bb = 10
let cc=aa+bb
  return cc
})
</script>
<style lang="scss" scoped>
.circleOut{
width: 145px;
height: 145px;
background: rgba(255,255,255,0.00);
border: 2px solid #2bd3d2;
border-radius: 50%;
position: relative;
}
.circleIn{
width: 121px;
height: 121px;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
// background: linear-gradient(180deg,#0c414e, #0c414e 20%, #29c9c9 30%);
}
.textCenter{
width: 300px;
height: 100px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
text-align: center;
width: 65px;
height: 23px;
font-weight: bold;
color: #ffffff;
}
.subTextCenter{
width: 300px;
height: 100px;
position: absolute;
left: 0;
right: 0;
top: 55%;
margin: auto;
text-align: center;
width: 65px;
height: 23px;
font-weight: bold;
color: #ffffff;
}
</style>